<template>
  <div id="showMetadata">
    <el-container>
      <el-header>
        <div>
          <div style="display: inline-block">
            <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                       @click="goBack">返回
            </el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">查看元数据</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div id="menu">
            <MenuItem :item="item" :key="item.name" v-for="item in items" @change-selection="refreshList"></MenuItem>
          </div>
        </el-aside>
        <el-main style="padding: 0px">
          <div>
            <el-form :inline="true" disabled :model="MetadataForm" :style="{ display: Metadata }"
                     class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Metadata"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>附注</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.annotation"></el-input>
                </div>
                <div class="inline-block">
                  <div>封面</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.cover"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>所属分类</div>
                  <div class="input-with-select">
                    <el-input v-model="categoryStr" disabled/>
                  </div>
                </div>
                <div class="inline-block">
                  <div>版本</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Edition"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>权限</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Right"></el-input>
                </div>
                <div class="inline-block">
                  <div>时空范围</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Coverage"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>语种</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Language"></el-input>
                </div>
                <div class="inline-block">
                  <div>来源</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Source"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>唯一标识符</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Identifier"></el-input>
                </div>
                <div class="inline-block">
                  <div>数字资源类型</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Type"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>国际标准书号</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.ISBN"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" disabled :model="TitlesForm" :style="{ display: Titles }" class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Titles"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>正题名</div>
                  <el-input size="small" class="input-with-select" v-model="TitlesForm.Main_Title"></el-input>
                </div>
                <div class="inline-block">
                  <div>交替题名</div>
                  <el-input size="small" class="input-with-select" v-model="TitlesForm.Alternative_Title"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div>
                  <div class="inline-block">
                    <div>并列题名</div>
                    <el-input size="small" class="input-with-select" v-model="TitlesForm.Parallel_Title"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>其他题名</div>
                    <el-input size="small" class="input-with-select" v-model="TitlesForm.Other_Title"></el-input>
                  </div>
                </div>
              </div>
            </el-form>

            <el-form :inline="true" disabled :model="SubjectForm" :style="{ display:Subject}" class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Subject"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>中图号</div>
                  <el-input size="small" class="input-with-select" v-model="SubjectForm.CLC_ClassCode"></el-input>
                </div>
                <div class="inline-block">
                  <div>关键词</div>
                  <el-input size="small" class="input-with-select" v-model="SubjectForm.KeyWords"></el-input>
                </div>
              </div>
            </el-form>

            <el-form :inline="true" disabled :model="DescriptionForm" :style="{ display: Description}"
                     class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Description"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>资源类型</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.contentType"></el-input>
                </div>
                <div class="inline-block">
                  <div>内容简介</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.Introduction"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>其他</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.Other"></el-input>
                </div>
              </div>
            </el-form>

            <el-form :inline="true" disabled :model="PublisherForm" :style="{ display: Publisher}"
                     class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Publisher"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>出版者</div>
                  <el-input size="small" class="input-with-select" v-model="PublisherForm.Publisher"></el-input>
                </div>

                <div class="inline-block">
                  <div>出版地</div>
                  <el-input size="small" class="input-with-select" v-model="PublisherForm.Publish_Area"></el-input>
                </div>
              </div>
            </el-form>

            <el-form :inline="true" disabled :model="DateForm" :style="{ display: Date1}" class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Date"></h1>
              <div>
                <div class="block" style="display: inline-block;margin-left: 10px">
                  <div class="demonstration">出版日期</div>
                  <el-date-picker
                    v-model="DateForm.Publish_Date"
                    value-format="yyyy.MM"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="display: inline-block;margin-left: 10px">
                  <div class="demonstration">创建日期</div>
                  <el-date-picker
                    v-model="DateForm.Create_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">提交日期</div>
                  <el-date-picker
                    v-model="DateForm.Submit_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">审核日期 date</div>
                  <el-date-picker
                    v-model="DateForm.Check_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">修改日期</div>
                  <el-date-picker
                    v-model="DateForm.Modify_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">失效日期</div>
                  <el-date-picker
                    v-model="DateForm.Failure_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
            </el-form>

            <el-form :inline="true" disabled :model="FormatForm" :style="{ display: Format}" class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Format"></h1>
              <div>
                <div class="inline-block">
                  <div>数字资源格式类</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Format_type"></el-input>
                </div>
                <div class="inline-block">
                  <div>资源载体</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Resource_carrier"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>资源大小</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.File_Size"></el-input>
                </div>
                <div class="inline-block">
                  <div>字数</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Words"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>技术环境</div>
                  <el-input size="small" class="input-with-select"
                            v-model="FormatForm.Technical_environment"></el-input>
                </div>
                <div class="inline-block">
                  <div>页数</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Pages"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>开本</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Extent"></el-input>
                </div>
                <div class="inline-block">
                  <div>图书在版编目数据</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.CIP"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>分辨率</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Resolution"></el-input>
                </div>

              </div>
            </el-form>

            <el-form :inline="true" disabled :model="RelationForm" :style="{ display: Relation}"
                     class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Relation"></h1>
              <div>
                <div class="inline-block">
                  <div>丛书名</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Series"></el-input>
                </div>
                <div class="inline-block">
                  <div>后版本</div>
                  <el-input size="small" class="input-with-select"
                            v-model="RelationForm.Formal_Edition"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>前版本</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Formal_Edition"></el-input>
                </div>
                <div class="inline-block">
                  <div>配套光盘</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Attached_Disc"></el-input>
                </div>
              </div>
            </el-form>

            <el-form :inline="true" disabled :model="PriceForm" :style="{ display: Price}" class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Price"></h1>
              <div>
                <div class="inline-block">
                  <div>纸质图书价格</div>
                  <el-input size="small" class="input-with-select" v-model="PriceForm.B_price"></el-input>
                </div>
                <div class="inline-block">
                  <div>数字资源价格</div>
                  <el-input size="small" class="input-with-select" v-model="PriceForm.E_price"></el-input>
                </div>
              </div>
            </el-form>

            <el-form :inline="true" disabled :model="EditorForm" :style="{ display: Editors}" class="demo-form-inline"
                     style="height: 500px">
              <h1 id="Editor"></h1>
              <div>
                <div class="inline-block">
                  <div>策划编辑</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Scheme_Editor"></el-input>
                </div>
                <div class="inline-block">
                  <div>责任编辑</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Commissioning_Editor"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>封面设计</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Cover_Designer"></el-input>
                </div>
                <div class="inline-block">
                  <div>版本设计</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Layout_Disigner"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>责任校队</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Press_Corrector"></el-input>
                </div>
                <div class="inline-block">
                  <div>其他</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.others"></el-input>
                </div>
              </div>
            </el-form>

            <el-table highlight-current-row :data="CreatorsTableData" disabled :style="{ display: Creators}" border stripe height="500px">
              <el-table-column label="名字" min-width="200" prop="Name"></el-table-column>
              <el-table-column label="角色" min-width="200" prop="Role"></el-table-column>
              <el-table-column label="描述" min-width="200" prop="Institution"></el-table-column>
            </el-table>

            <el-table highlight-current-row :data="ContributorTableData" disabled :style="{ display: Contributors}"
                      border stripe
                      height="500px">
              <el-table-column label="名字" min-width="200" prop="Name"></el-table-column>
              <el-table-column label="角色" min-width="200" prop="Role"></el-table-column>
              <el-table-column label="描述" min-width="200" prop="Institution"></el-table-column>
            </el-table>
            <el-form :inline="true" :model="MetadataForm" :style="{ display: summary}" class="demo-form-inline" disabled
                     style="height: 500px">
              <h1 id="summary"></h1>
              <div>
                <div class="inline-block">
                  <div>简介</div>
                  <el-input v-model="MetadataForm.summary" class="input-with-select" style="width:400px;"
                            type="textarea"></el-input>
                </div>
              </div>
            </el-form>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MenuItem from "../common/MenuItem";

let dItems = [{
  name: '元数据',
  selected: true,
}, {
  name: '标题',
  selected: false,
}, {
  name: '主题',
  selected: false,
}, {
  name: '创作者',
    selected: false,
  }, {
    name: '描述',
    selected: false,
  }, {
    name: '出版者',
    selected: false,
  }, {
    name: '协作者',
    selected: false,
  }, {
    name: '日期',
    selected: false,
  }, {
    name: '数字资源格式',
  selected: false,
}, {
  name: '相关资源',
  selected: false,
}, {
  name: '价格',
  selected: false,
}, {
  name: '编辑',
  selected: false,
}, {
  name: '简介',
  selected: false,
}];
  export default {
    name: "edit",
    components: {
      MenuItem,
    },
    data() {
      return {
        items: dItems,
        MetadataForm: {},
        TitlesForm: {},
        SubjectForm: {},
        DescriptionForm: {},
        PublisherForm: {},
        FormatForm: {},
        RelationForm: {},
        PriceForm: {},
        EditorForm: {},
        DateForm: {},
        CreatorsTableData: [],
        ContributorTableData: [],
        Titles: 'none',
        Metadata: '',
        Subject: 'none',
        Description: 'none',
        Publisher: 'none',
        Date1: 'none',
        Format: 'none',
        Relation: 'none',
        Price: 'none',
        Editors: 'none',
        Creators: 'none',
        Contributors: 'none',
        summary: 'none',
        categoryStr: '',
      }
    },
    methods: {
      refreshList(item) {
        window.location.href = '#' + item.name;
        this.setAllItemsUnselected();
        this.setSelectedItem(item);
        if (item.name != '元数据') {
          this.Metadata = 'none';
        } else {
          this.Metadata = '';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '主题') {
          this.Metadata = 'none';
          this.Subject = '';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '标题') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = '';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '描述') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = '';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '出版者') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = '';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '日期') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = '';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '数字资源格式') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = '';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '相关资源') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = '';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '价格') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = '';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '编辑') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = '';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '创作者') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = '';
          this.summary = 'none';
        }
        if (item.name === '协作者') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = '';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '简介') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = '';
        }
      },
      setAllItemsUnselected() {
        this.items.forEach(item => {
          item.selected = false;
        });
      },
      setSelectedItem(selectedItem) {
        this.items.forEach(item => {
          if (item.name === selectedItem.name) {
            item.selected = true;
          }
        });
      },
      goBack: function () {
        this.$router.push("/bookLib")
      },
      handleToTopClick() {
        window.location.href = '#top';
        this.setAllItemsUnselected();
        this.setSelectedItem(this.items[0]);
      }
    },
    created() {
      this.MetadataForm = this.$route.query.metadata
      this.categoryStr = this.$route.query.categoryStr
      this.TitlesForm = this.MetadataForm.Titles
      this.SubjectForm = this.MetadataForm.Subject
      this.DescriptionForm = this.MetadataForm.Description
      this.PublisherForm = this.MetadataForm.Publisher
      this.FormatForm = this.MetadataForm.Format
      this.DateForm = this.MetadataForm.Date
      this.RelationForm = this.MetadataForm.Relation
      this.PriceForm = this.MetadataForm.Price
      this.EditorForm = this.MetadataForm.Editors
      this.CreatorsTableData = this.MetadataForm.Creators.Creator
      this.ContributorTableData = this.MetadataForm.Contributors.Contributor
    }
  }
</script>

<style scoped>
  #menu {
    margin-top: 15px;
  }

  .input-with-select {
    width: 320px;
    margin-top: 10px
  }

  .inline-block {
    display: inline-block;
    margin-left: 10px;
  }

</style>
